<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      left-arrow
      title="文章详情"
      fixed
      placeholder
      @click-left="$router.back()"
    ></van-nav-bar>
    <!-- /导航栏 -->

    <div class="container" style="height: 90vh">
      <div class="article-content">
        <h1 class="title">{{ title }}</h1>

        <!-- 骨架屏 -->
        <van-skeleton title avatar :row="3" :loading="!article.time">
          <van-cell center class="user-info">
            <div slot="title" class="name">{{ article.author }}</div>
            <van-image
              slot="icon"
              class="avatar"
              round
              fit="cover"
              :src="article.avatar"
            />
            <div slot="label" class="pubdate">{{ article.time }}</div>
            <!-- <van-button
            class="follow-btn"
            type="default"
            icon="plus"
            round
            size="small"
            >已关注</van-button
          > -->
          </van-cell>
          <div class="markdown-body" v-html="article.content"></div>
        </van-skeleton>

        <van-divider
          :style="{
            borderColor: '#eee',
            height: '16px',
          }"
        >
        </van-divider>

        <!-- 文章评论列表 -->
        <div class="section">热门评论</div>

        <van-list
          v-model="commentLoading"
          :finished="commentFinished"
          finished-text="没有更多了"
          @load="getCommentList"
        >
          <template #finished>
            <div>
              <p v-if="commentList.length === 0">快来评论吧</p>
              <p v-else>没有更多数据了</p>
            </div>
          </template>
          <div class="van-clearfix">
            <van-cell
              class="comment-item"
              v-for="(item, index) in commentList"
              :key="item._id"
            >
              <van-image
                slot="icon"
                class="avatar"
                round
                fit="cover"
                :src="item.info.avatar"
              />
              <div slot="title">
                <div class="title-w">
                  <div class="name">{{ item.info.nickname }}</div>
                  <div class="like-w">
                    <van-icon
                      class="like-icon"
                      :class="{ liked: item.is_like }"
                      name="good-job"
                      @click="toggleCommentLike(item._id, item.is_like, index)"
                    />
                    <span class="like-count">{{
                      item.like_count == 0 ? "" : item.like_count
                    }}</span>
                  </div>
                </div>
                <div class="content">{{ item.content }}</div>
                <div class="info">
                  <span class="pubdate">{{ item.create_time }}</span>
                  <van-button class="reply-btn" round size="mini"
                    >{{
                      item.reply_num == 0 ? "" : item.reply_num
                    }}回复</van-button
                  >
                </div>
              </div>
            </van-cell>
          </div>
        </van-list>
        <!-- /文章评论列表 -->
      </div>
    </div>
    <!-- /发布评论 -->
    <div class="article-bottom">
      <van-button
        class="comment-btn"
        type="default"
        round
        size="small"
        @click="PopupShow(0)"
        >写评论</van-button
      >
      <!-- 评论图标 -->
      <van-icon
        name="comment-o"
        color="#777"
        v-if="article.comment && article.comment == 0"
      />
      <van-icon name="comment-o" color="#777" :badge="article.comment" v-else />
      <!-- 收藏 -->
      <van-icon
        name="star"
        :color="article.is_fav ? '#f00' : '#777'"
        @click="toggleFav"
      />
      <!-- 点赞 -->
      <van-icon
        name="good-job"
        :color="article.is_like ? '#f00' : '#777'"
        @click="toggleLike"
      />
      <van-icon name="share" color="#777777"></van-icon>
    </div>

    <!-- 评论回复 -->

    <van-popup v-model="commentPopupShow" position="bottom">
      <div class="post-comment">
        <van-field
          v-model="content"
          rows="4"
          autosize
          type="textarea"
          maxlength="1000"
          placeholder="为作者评论精彩内容吧"
          show-word-limit
        />
        <div style="width: 100%">
          <van-button size="large" type="primary" @click="submit"
            >确定</van-button
          >
        </div>
      </div>
    </van-popup>
    <!-- /评论回复 -->
  </div>
</template>

<script>
import "@/common/github-markdown.css";
import { Popup, Skeleton, Divider, Field } from "vant";
import { mapState } from "vuex";
import articleMethods from "./articleMethods";
import commentMixin from "./commentMixin";
import { addComment } from "@/api/pages";
export default {
  name: "pagearticle",
  data() {
    return {
      commentPopupShow: false,
      content: "",
      title: "",
      article_id: "",
      article: {},
      comment_type: 0,
    };
  },
  components: {
    [Field.name]: Field,
    [Popup.name]: Popup,
    [Skeleton.name]: Skeleton,
    [Divider.name]: Divider,
  },
  computed: {
    ...mapState(["uid", "userInfo"]),
  },
  mixins: [commentMixin],
  created() {
    let { title, article_id } = this.$route.query;
    this.article_id = article_id;
    this.title = title;

    this.getArticleDetail();
  },

  methods: {
    ...articleMethods,
    //弹出评论弹窗
    PopupShow() {
      if (this.checkLogin()) {
        this.commentPopupShow = true;
      }
      // this.checkLogin() ? (this.commentPopupShow = true) : "";
    },
    // 发评论
    submit() {
      let { content, uid: user_id, article_id, comment_type } = this;
      content = content.trim();
      if (typeof content != "string" || content.length === 0) {
        this.$toast("格式错误");
        return;
      }
      content = content.trim();
      // if (!this.checkLogin()) return;
      // console.log(1);

      addComment({
        content,
        user_id,
        article_id,
        comment_type,
      }).then((res) => {
        console.log(res);

        this.$toast(res.msg);
        if (res.code == 0) {
          this.commentPopupShow = false;
          this.content = "";
          this.article.comment++;

          // this.skip = 0;
          // this.commentFinished = false;
          // this.commentList = [];
          // this.getCommentList();

          let { avatar, nickname, username, _id } = this.userInfo;
          let newCommentData = {
            article_id,
            comment_type,
            content,
            create_time: new Date().getTime(),
            like_count: 0,
            reply_comment_id: "",
            reply_num: 0,
            user_id,
            info: {
              avatar,
              nickname,
              username,
              _id: user_id,
            },
            _id: res.data._id, //你刚发布的这条数据的id  后端给我返回了
          };
          this.commentList.unshift(newCommentData);
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
// html,
// body {
//   height: 100%;
// }
.article-content {
  // overflow-y: auto;
  padding-bottom: 100px;
  // height: 80vh;

  .title {
    font-size: 20px;
    color: #3a3a3a;
    padding: 24px 20px 18px;
    background-color: #fff;
    margin: 0;
  }
}

.user-info {
  .avatar {
    width: 35px;
    height: 35px;
    margin-right: 8px;
  }
  .name {
    font-size: 12px;
    color: #333333;
  }
  .pubdate {
    font-size: 11px;
    color: #b4b4b4;
  }
  .follow-btn {
    width: 85px;
    height: 29px;
  }
}

ul {
  list-style: unset;
}

.markdown-body {
  padding: 14px;
  background-color: #fff;
}
.section {
  padding: 10px;
  font-size: 19px;
  color: #3a3a3a;
}
.article-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  height: 44px;
  border-top: 1px solid #d8d8d8;
  background-color: #fff;
  .comment-btn {
    width: 141px;
    height: 23px;
    border: 1px solid #eeeeee;
    font-size: 15px;
    line-height: 23px;
    color: #a7a7a7;
  }
  .van-icon {
    font-size: 20px;
    .van-info {
      font-size: 11px;
      background-color: #e22829;
    }
  }
}
.comment-item {
  .avatar {
    width: 36px;
    height: 36px;
    margin-right: 13px;
  }
  .name {
    font-size: 16px;
    color: #555;
  }
  .content {
    font-size: 16px;
    color: #222222;
    margin: 10px 0;
  }
  .info {
    display: flex;
    height: 36px;
    align-items: center;
  }
  .pubdate {
    font-size: 12px;
    margin-right: 12px;
  }
  .title-w {
    display: flex;
    justify-content: space-between;
    height: 36px;
    align-items: center;
  }
  .like-w {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .like-icon.liked {
    color: #ef092c;
  }
}

.article-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  height: 44px;
  border-top: 1px solid #d8d8d8;
  background-color: #fff;
  .comment-btn {
    width: 200px;
    height: 30px;
    border: 1px solid #eeeeee;
    font-size: 15px;
    line-height: 23px;
    color: #a7a7a7;
  }
}

.post-comment {
  padding: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.van-button--large {
  border-radius: 30px;
}
</style>
